<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>web存储</title>
		<style type="text/css">
			textarea{
				width: 500px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>简单的web存储留言板</h2>
			<textarea id="t1"></textarea>
			<br />
			<input type="button" class="button" onclick="addInfo()" value="留言" />
			<input type="button" class="button" onclick="cleanInfo()" value="清除留言" />
			<br />
			<hr />
			<label id="shows"></label>
			<textarea id="show" readonly="readonly"></textarea>
		</div>
		
		<script>
			//使用HTML5 web存储的localStorage方式进行编写一个web页面
				//功能是一个简易的web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图：
				
				function upInfo(){
					var lStorage = window.localStorage;
					var show = window.document.getElementById("show");
					if(window.localStorage.myBoard){
						show.value = window.localStorage.myBoard;
					}else{
						var info = "还没有留言";
						show.value = "还没有留言";
					}
				}
				
				function addInfo(){
					var info = window.document.getElementById("t1");
					var lStorage = window.localStorage;
					if(lStorage.myBoard){
						var date = new Date();
						lStorage.myBoard += t1.value + "\n发表时间：" + date.toLocaleString()+"\n";
					}else{
						var date = new Date();
						lStorage.myBoard = t1.value + "\n发表时间：" + date.toLocaleString() + "\n";
					}
					upInfo();
				}
				function cleanInfo(){
					window.localStorage.removeItem("myBoard");
					upInfo();
				}
				upInfo();
		</script>
	</body>
</html>
